<!DOCTYPE html>
<html>

<head lang="en">
    <title>首页</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css" rel="stylesheet">
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

</head>


<body>

<!--隐藏域当前页，分页查询，默认为首页-->
<input type="hidden" name="currentPage" id="currentPage" value="1">

<div class="body">
    <!--全局搜索隐藏-->
    <div class="search-head">
        <div class="row nav-search">
            <div class="col-2">
                <a href="javascript:history.go(-1);">
                    <span><i class="fa fa-chevron-left fa-2x"></i></span>
                </a>
            </div>
        </div>
    </div>
    <!--产品推荐-->
</div>
<hr>
<!--全部订单-->
<div class="container" style="font-size: smaller">
    <h6 class="module-title" style="color: #20c997">全部订单</h6>
    <hr>
    <div class="container" id="allProducts">
        <dl class="list" render-loop="list">
            <dd>
                <!--第1行-->
                <div class="col2_left j_threadlist_li_left" style="font-size: 13px;color: #0062cc;font-weight: bold">
                    订单号：<span class="threadlist_rep_num center_text" render-html="list.id">15</span>
                    &nbsp;
                    <a data-href="insuranceProduct.html?id=" render-key="list.id" render-fun="getHref"
                       style="color: red;border: red">
                        <span class="threadlist_rep_num center_text" render-html="list.productName">15</span>
                    </a>
                    &nbsp;&nbsp;
                    ¥<span class="threadlist_rep_num center_text" render-html="list.orderAmount">15</span>

                </div>

                <!--第2行-->
                <div class="col2_left j_threadlist_li_left">
                    &nbsp;&nbsp;&nbsp;被保障人：<span class="threadlist_rep_num center_text"
                                                 render-html="list.clientName">15</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    联系方式：<span class="threadlist_rep_num center_text" render-html="list.phoneNum">15</span>
                </div>

                <!--第3行-->
                <div class="col2_left j_threadlist_li_left">
                    &nbsp;&nbsp;
                    ID：<span class="threadlist_rep_num center_text" render-html="list.idNum">15</span>
                </div>

                <!--第4行-->
                <div class="col2_left j_threadlist_li_left">
                    &nbsp;&nbsp;
                    Email：<span class="threadlist_rep_num center_text" render-html="list.email">15</span>
                </div>

                <!--第5行-->
                <div class="col2_left j_threadlist_li_left">
                    &nbsp;&nbsp;
                    承保时间：<span class="threadlist_rep_num center_text" render-html="list.startDate">15</span>
                    &nbsp;至&nbsp;
                    <span class="threadlist_rep_num center_text" render-html="list.endDate">15</span>
                </div>
                <!--第6行-->
                <div class="col2_left j_threadlist_li_left">
                    &nbsp;&nbsp;
                    订单时间：<span class="threadlist_rep_num center_text" render-html="list.orderTime">15</span>
                </div>
                <hr>

            </dd>
        </dl>
    </div>

    <!----------------------------------------------------------------------------------------------------------------->

</div>




<script>

    $(function () {
        // 获取隐藏域input框中的当前页页码
        var currentInput = $("#currentPage");

        // 创建数组储存产品
        var productsArr = [];

        // 默认当前总页数为1（开始显示第一页，查询显示了+1<方便下滑拉动时查询第二页>）
        var pages = 1;

        // 创建查询产品的方法query
        function query() {

            // 获取当前页页码
            var currentPage = currentInput.val();

            // 查询当前页产品信息
            $.get('/insurances/orders', {currentPage: currentPage, pageSize: 9}, function (data) {

                // 合并两个数组到第一个参数数组上
                $.merge(productsArr, data.list);

                // 创建json数组，用于渲染循环时取list属性
                var json = {list: productsArr};
                console.log(json);

                // 页面渲染数据
                $("#allProducts").renderValues(json, {
                    getHref: function (item, value) {
                        // $(item)是当前要渲染标签元素(a),value是render-key的值（list.id）
                        // 获取跳转地址
                        var href = $(item).data("href");

                        // 把产品id添加到拼接到标签a的跳转url上（href属性）
                        /* $(item).attr('href', href + value);*/
                    }
                });

                // 根据查询到的结果集重新设置总页数pages
                pages = data.pages;
            });

            // 当前页+1（input框value值+1）
            currentInput.val(parseInt(currentPage) + 1);
        }


        // 打开页面，默认查询首页信息
        query();

        // 页面滚动条变化时，执行scroll函数
        $(window).scroll(function () {
            // 下滑拉动引起页面滚动，当滚动条件满足以下条件，即查询下一页的产品信息
            if ($(document).scrollTop() + $(window).height() + 1 >= $(document).height()) {

                // 获取当前页页码
                var currentPage = currentInput.val();

                // 当前页码小于或等于总页数，就查询；不然弹框提示已加载完全
                if (currentPage <= pages) {
                    query();
                } else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '已经加载全!',
                        autoClose: 300,
                        position: 'bottom'  // center居中  bottom底部
                    });
                }
            }
        });

    });

</script>
<style>
    a:active {
        font-size: 10px;
        font-weight: bolder
    }
</style>

</body>

</html>